<template>
  <div class="all">
    <header>
      <div class="div" @click="back">
        <img src="../../../assets/返回.png" alt="">
        <span class="solt">返回</span>
      </div>
      <div class="div">
        <span>建议详情</span>
      </div>
      <div class="div" >
      </div>
    </header>
    <div class="content">
      <div class="yaoPinList">
        <ul v-for="(item, index) in tableList" :key="index">
<!--          <span class="badge">{{index + 1}}</span>-->
          <li class="li_haeder">
            <div style="width: 90%;">
              <p style="margin-bottom: 5px">
                <span style="font-size: 15px">{{item.name}}</span>
                <span style="font-size: 13px;color: #666666">(药品名称)</span>
              </p>
              <p style="font-size: 13px;color: #999">规格：{{item.specifications}}</p>
            </div>
            <div style="display: block;width: 10%;height: 25px;display: flex;margin-bottom: 10px;">
<!--              <img @click="deleteAdd(index)" style="width: 12px;height: 13px;" src="../../../assets/垃圾桶@2x.png" alt="">-->
            </div>
          </li>
          <li class="li_yaofang">
            <div>
              <img src="../../../assets/单位@2x.png" alt="">
              <span>单位：{{item.danwei}}</span>
            </div>
            <div>
              <img src="../../../assets/频次@2x.png" alt="">
              <span>频次：{{item.pinci}}</span>
            </div>
          </li>
          <li class="li_yaofang">
            <div>
              <img src="../../../assets/用法@2x.png" alt="">
              <span>用法：{{item.yongfa}}</span>
            </div>
            <div>
              <img src="../../../assets/一次用量@2x.png" alt="">
              <span>一次用量：{{item.yongliang}}</span>
            </div>
          </li>
          <li class="li_yaofang">
            <div>
              <img src="../../../assets/总量@2x.png" alt="">
              <span>总量：{{item.zongliang}}</span>
            </div>
            <div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChuFangLook',
  data () {
    return {
      tableList: []
    }
  },
  mounted () {
    this.getfindOnePrescriptionDrug()
  },
  methods: {
    getfindOnePrescriptionDrug () {
      this.$http.findOnePrescriptionDrug({id: this.$route.query.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.tableList = res.data.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100vh;
    background: #FAF9FE;
    overflow: scroll;
  }
  header{
    width: 100vw;
    height: 44px;
    background: #FFFFFF;
    box-shadow: 0px 1px 0px 0px #E5E5E5;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 999;
  }
  .div{
    width: 33%;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    display: flex;
    align-items: center;
  }
  .div:nth-child(1) img{
    width: 7px;
    height: 13px;
    margin: 0 5px 0 15px;
  }
  .div:nth-child(2) {
    justify-content: center;
  }
  .div:nth-child(3) {
    justify-content: flex-end;
  }
  .div:nth-child(3) button{
    margin-right: 15px;
  }
  .div:nth-child(3) img{
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }
  .solt{
    color: #1DA4F2;
  }
  .yaoPinList{
    width: 100%;
  }
  .badge{
    width: 14px;
    height: 14px;
    background: #1DA4F2;
    border-radius: 2px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: -5px;
    top: -5px;
    font-size: 11px;
  }
  .li_haeder{
    height: auto !important;
    display: flex;
    /*align-items: center;*/
    padding: 8px 10px !important;
    box-sizing: border-box;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .li_haeder div:nth-child(1){
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .li_yaofang{
    height: 25px !important;
    font-size: 13px!important;
  }
  .li_yaofang div{
    width: 50%;
    display: flex;
    align-items: center;
  }
  .li_yaofang img{
    width: 13px;
    height: 12px;
    margin-right: 5px;
  }
  .yaoPinList ul{
    width: 92%;
    margin: 10px auto;
    background: white;
    position: relative;
    border-radius: 10px;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.15);
  }
  .yaoPinList ul li{
    border: none;
    display: flex;
    padding: 0 10px;
    box-sizing: border-box;
  }
</style>
